<template>
  <div class="child">
    <p>child</p>
    fatherTest: {{fatherTest}}
    <button @click="handleChildBtnClick">child btn</button>
    <div>
      {{slots.default()}}
    </div>
  </div>
  
</template>

<script>

import { reactive, toRef, ref } from 'vue'
export default {
  name: 'Child',
  setup (props, context) {
    console.log('context', context)

    // context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

    const { attrs, slots, emit } = context

    console.log('attrs.test', attrs.test)

    let fatherTest = ref(attrs.test)

    // const data = reactive({
    //   name: 'liuxin'
    // })

    // const name = toRef(data, 'name')

    // setTimeout(() => {
    //   name.value = 'hello'
    // }, 2000);

    const handleChildBtnClick = () => {
      emit('childBtnClick', 'params')
    }

    return {
      fatherTest,
      handleChildBtnClick,
      slots
    }
  }
}
</script>

<style scoped>
.child {
  border: 1px solid tan;
}
</style>
